<!-- 播放器的整体结构-->
<template>
  <div class="player-wrapper">
    <mini-player v-if="!fullScreen" :progress="progress"></mini-player>
    <normal-player v-else :progress="progress" @touchChange="handleTouchChangeAction" @change="handleProgressChange" :currentTime="currentTime" :duration="duration"></normal-player>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"
    ></audio>
  </div>
</template>

<script>
import MiniPlayer from "./mini-player.vue";
import NormalPlayer from "./normal-player.vue";
import { mapState } from "vuex";
export default {
    data() {
        return {
            // 音乐播放的当前时间
            currentTime: 0,
            // 音乐播放的总时长
            duration: 0,
            // 是否在拖拽
            isTouch: false
        }
    },
  components: {
    MiniPlayer,
    NormalPlayer,
  },
  computed: {
    //    ...mapGetters(['currentSong'])
    // ...mapGetters({
    //   currentSong: "Player/currentSong",
      
    // }),
    ...mapState({
      playing: (state) => state.Player.playing,
      fullScreen: (state) => state.Player.fullScreen,
      currentSong: (state) => state.Player.currentSong
    }),
    id() {
      return this.currentSong.id;
    },
    progress() {
        const res = this.currentTime / this.duration;
        return isNaN(res) ? 0 : res;
    }
  },
  watch: {
    //    监听播放状态，操作audio
    playing(newVal) {
      console.log(newVal);
      // console.log(this.audio.src)
      this.$nextTick(() => {
        if (newVal) {
          this.audio.play();
        } else {
          this.audio.pause();
        }
      });
    },
    // 监听id，id变了，要重新加载歌曲，重新播放歌曲
    id() {
      this.$nextTick(() => {
        // 从Chrome50开始，对<video>或<audio>元素的play()调用返回一个Promise。
        let playPromise = this.audio.play();
        if (playPromise !== undefined) {
          playPromise
            .then(() => {
              this.audio.load();
              this.audio.play()
            })
            .catch(() => {});
        }
      });
    },
  },
  methods: {
      handleProgressChange(newValue) {
        //   console.log(newValue)
        // 获取子组件传递过来的进度条，修改当前播放时间currentTime
        this.currentTime = newValue * this.duration;
        // 拖拽进度条的时候，不能同时改变当前播放时间，否则会出现卡碟
        // this.audio.currentTime = this.currentTime;
      },
    //   全部播放器的拖拽事件
      handleTouchChangeAction(value) {
          if(value === 'start') {
              this.isTouch = true;
          }else {
              this.isTouch = false;
            //   用户拖拽完成了，更新播放时间
              this.audio.currentTime = this.currentTime;
          }
      }
  },
  mounted() {
    //    组件挂载好之后，获取audio标签
    this.audio = this.$refs.audio;

    this.audio.addEventListener('canplay', () => {
        // console.log(this.audio.duration)
        this.duration = this.audio.duration
    })
     this.audio.addEventListener('timeupdate', () => {
        // console.log(this.audio.currentTime)
        if(this.isTouch){
            return;//用户在拖进度条
        }
        this.currentTime = this.audio.currentTime
    })
  },
};
</script>

<style lang="scss">
</style>